<template>
  <div id="back">
    <div id="title">七哥医卫后台管理系统</div>
    <div id="proof">
      <div style="font-size:20px; margin-bottom:20px; font-weight:545;padding-left:120px">欢迎登陆</div>

      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
         class="demo-form-inline" label-position="top">

        <el-form-item prop="name" >
          <el-input v-model="ruleForm.name" autocomplete="off" placeholder="请输入用户名"></el-input>
           <span class="el-input__prefix">
              <i class="el-input__icon el-icon-lock"></i>
           </span>
        </el-form-item>

        <el-form-item prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="请输入密码"></el-input>
            <span class="el-input__prefix">
              <i class="el-input__icon el-icon-lock"></i>
            </span>
        </el-form-item>

        <el-form-item prop="code"  style="width:150px">
          <el-input v-model="ruleForm.code" autocomplete="off" placeholder="请输入验证码" ></el-input>
          <span class="el-input__prefix">
            <i class="el-input__icon el-icon-coordinate"></i>
          </span>
        </el-form-item>

        <div id="v_container"></div>
          <!-- 上面在修改 -->

        <el-form-item>
          <el-button type="primary" @click="submit" style="width:320px">登录</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
import { GVerify } from './verifyCode';
export default {
     data() {
      var checkName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空'));
        }
        callback();
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (value.length < 6) {
            callback(new Error('长度至少6位'));
          }
          callback();
        }
      };
      var validateCode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入验证码'));
        } else if (value !== this.verifyCode.options.code.slice(-5,)) {
          callback(new Error('验证码输入错误'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          name: '',
          pass: '',
          code: '',
          verifyCode:''
        },
        rules: {
          name: [
            { validator: checkName, trigger: 'blur' }
          ],
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          code: [
            { validator: validateCode, trigger: 'blur' }
          ]
        },
        users:[
          {name:'zhangxiangrui',pass:123456},
          {name:'chengxuefei',pass:123456},
          {name:'chengli',pass:123456},
          {name:'wangjun',pass:123456},
          {name:'shuchengchneg',pass:123456},
          {name:'lizi',pass:123456},
        ]


      };
    },
  methods: {
    submit(){
      console.log(this.$route.meta);
      for(var i=0;i<this.users.length;i++)
      {
         if(this.ruleForm.name==this.users[i].name)
         {
           if(this.ruleForm.pass==this.users[i].pass)
           {
             this.proof()
             break
           }
         }
         if(i==this.users.length-1)
         {
           alert("用户名或密码错误！")
         }
      }
    },
    proof(){
      console.log(this.verifyCode.options.code.slice(-4,));
      if(this.ruleForm.code==this.verifyCode.options.code.slice(-4,))
      {
        this.$route.meta.key='true'
        this.$router.push({ path: "/interface" })
        return 0;
      }else{
        return 0;
      }
    } 
   },

    mounted () {
     // 随机播放帧数
     this.verifyCode = new GVerify('v_container')
   },




};
</script>

<style lang="less">
*{
  text-align: left;
}
#back {
  width: 100%;
  height: 100%;
  background: url(../../assets/login.png);
}
#title {
  height: 80px;
  letter-spacing: 1px;
  font-size: 32px;
  text-align: center;
  line-height: 80px;
  color: white;
  background-color: rgba(255, 255, 255, 0.178);
}
#proof{
    // text-align: center;
    width: 400px;
    background-color: #fff;
    padding: 20px 40px;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.el-input__inner {
    padding-left: 30px !important;
}

#v_container{
    position: absolute;
    right: 40px;
    top: 190px;
    text-align: center;
}
</style>